<div>
  <yu-panel title="调度任务管理" v-loading="exportLoading">
    <yu-row :gutter="24">
      <yu-col :span="5">
        <div class="tree-custom-schdule">
          <!-- <h2  style="margin:10px 10px 10px 0;">应用系统目录</h2>-->
          <yu-button-group>
            <el-button class="btn" @click="createTreeFn" :disabled="!addClassFnButton">新增</el-button>
            <el-button class="btn" @click="updateTreeFn" :disabled="!updateClassFnButton">修改</el-button>
            <el-button class="btn" @click="deleteTreeFn" :disabled="!deleteClassFnButton">删除</el-button>
          </yu-button-group>
        </div>
        <yu-xtree ref="refTree" :height="height" @node-click="nodeClickFn" :data-url="treeDataUrl" data-id="currentNodeId" data-label="currentNodeName"
          data-pid="parentId" :data-async="async" data-root="0000" icon="iconPath" style="margin-right: 5px">
        </yu-xtree>
      </yu-col>
      <yu-col :span="19">
        <yu-xform related-table-name="refTable" form-type="search" v-model="searchFormdata">
          <yu-xform-group :column="4">
            <yu-xform-item label="系统名称" placeholder="系统名称" ctype="input" name="appName" :disabled="appNameDisabled"></yu-xform-item>
            <yu-xform-item label="任务名称" placeholder="任务名称" ctype="input" name="taskName"></yu-xform-item>
          </yu-xform-group>
        </yu-xform>
        <yu-toolBar>
          <yu-button @click="addFn" v-if="isNodeLeaf&&addFnButton">新增</yu-button>
          <yu-button @click="modifyFn" v-if="updateFnButton">修改</yu-button>
          <yu-button @click="deleteFn" v-if="deleteFnButton">删除</yu-button>
          <yu-button @click="taskOn" v-if="startOnFnButton">启用</yu-button>
          <yu-button @click="taskOff" v-if="startOffFnButton">停用</yu-button>
		  <yu-button @click="batchSave" v-if="startOffFnButton">批量保存</yu-button>
		  <yu-button @click="importFlowFn" v-if="importFnButton">excel导入</yu-button>
		  <yu-button @click="exportFlowFn" v-if="exportFnButton">excel导出</yu-button>
        </yu-toolBar>
        <!--<el-table-x ref="refTable" :data-url="dataUrl" :pageable="true" :radiobox="true" :table-columns="tableColumns" @custom-detail-click="viewDataFn">
     </el-table-x>-->
		<div ref="tableBox" style="overflow: auto;">
			<yu-xtable :height="tbHeight" ref="refTable" row-number :data-url="dataUrl" selection-type="checkbox" :pageable="true">
			  <yu-xtable-column label="系统名称" prop="appName" :show-overflow-tooltip="true">
			  </yu-xtable-column>
			  <yu-xtable-column label="任务名称" prop="yearValue" :show-overflow-tooltip="true">
				<template slot-scope="scope">
				  <a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="viewDataFn(scope.row)">{{ scope.row.taskName }}</a>
				</template>
			  </yu-xtable-column>
			  <yu-xtable-column label="任务路径" prop="folderPath" :show-overflow-tooltip="true"></yu-xtable-column>
			  <yu-xtable-column label="触发类型" data-code="USE_TASK_TRIGGER_TYPE"   prop="triggerType"></yu-xtable-column>
			  <yu-xtable-column label="工作日历" prop="calendarName" :show-overflow-tooltip="true"></yu-xtable-column>
			  <yu-xtable-column label="生效日期" prop="effectDate"></yu-xtable-column>
			  <yu-xtable-column label="失效日期" prop="expireDate"></yu-xtable-column>
			  <yu-xtable-column label="任务状态" data-code="USE_TASK_STATE"   prop="validFlag"></yu-xtable-column>
			</yu-xtable>
		</div>
        <yu-xdialog :title="viewTitle" :visible.sync="dialogVisible">
          <el-tabs type="border-card" v-model="activeTabName">
            <el-tab-pane label="任务信息" name="taskInfo" :disabled="true">
              <yu-xform ref="refForm" v-model="formdata" label-width="120px">
                <yu-xform-group>
                  <yu-xform-item label="调度作业流" ctype="select" name="groupCode" :options="groupCodeOptions" :disabled="updateFlag" @change="changeGroup" rules="required"></yu-xform-item>
                  <yu-xform-item label="任务名称" ctype="input" maxlength="120" name="taskName" rules="required"></yu-xform-item>
                  <yu-xform-item label="任务类型" ctype="select" data-code="USE_TASK_TYPE" name="taskType" rules="required" @change="changeTaskType"></yu-xform-item>
                  <yu-xform-item label="所属目录" ctype="input" name="folderName" rules="required" readOnly icon='search' @click="selectFolder"></yu-xform-item>
                  <yu-xform-item label="周期时点" ctype="input" :rules="weekrules" name="cycleTime"  icon='search' @click="selectCycleTime"></yu-xform-item>
                  <yu-xform-item label="工作日历" ctype="select" name="calendarCode" :options="calendarCodeOptions" rules="required"></yu-xform-item>
                  <yu-xform-item label="生效日期" ctype="datepicker"  format="yyyyMMdd" rules="required" name="effectDate"></yu-xform-item>
                  <yu-xform-item label="失效日期" ctype="datepicker"  format="yyyyMMdd" name="expireDate"></yu-xform-item>
                  <yu-xform-item label="任务状态" ctype="select" name="validFlag" data-code="USE_TASK_STATE" rules="required"></yu-xform-item>
                  <yu-xform-item label="任务触发器" ctype="input" name="triggerNm" readOnly :rules="triggerRules" :hidden="!isTrigger" icon='search' @click="selectTrigger"></yu-xform-item>
                  <yu-xform-item label="使用内置时点" ctype="select"  name="InSideFlag" :options="InSideFlagOptions" rules="required" @change="changeInSide" ></yu-xform-item>
                  <yu-xform-item label="内置时点" ctype="datepicker" format="yyyyMMdd" value-format="yyyyMMdd" rules="required" :hidden="!showInsideCycleTime" name="insideCycleTime" ></yu-xform-item>
                  <yu-xform-item label="备注" ctype="textarea" name="remark" maxlength="240" :colspan="24" :rows="3"></yu-xform-item>
                </yu-xform-group>
              </yu-xform>
              <div class="yu-grpButton">
                <yu-button @click="cancelFn">取消</yu-button>
                <yu-button type="primary" @click="nextStep">下一步</yu-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="任务参数" name="taskParam" :disabled="true">
              <yu-toolBar>
                <el-button @click="addParams">新增</el-button>
                <el-button @click="deleteParams">删除</el-button>
              </yu-toolBar>
              <yu-xtable selection-type="checkbox" ref="refparamstab" :row-class-name="tableRowClassName" :pageable="false" :data="paramDatas" @row-click="paramClick" style="width: 100%"
                max-height="300">
                <yu-xtable-column prop="paramCode" ctype="input" maxlength="64" label="参数代码" :rules="rulesCode">
                </yu-xtable-column>
                <yu-xtable-column prop="paramName" ctype="input" maxlength="120" label="参数名称">
                </yu-xtable-column>
                <yu-xtable-column prop="paramValue" ctype="yufp-select-params" maxlength="120":params="nodeTemp" label="参数值" @select-fn="selectFn">
                </yu-xtable-column>
                <yu-xtable-column prop="remark" ctype="input" label="备注" maxlength="240">
                </yu-xtable-column>
              </yu-xtable>
              <div class="yu-grpButton">
                <yu-button @click="lastStep">上一步</yu-button>
                <yu-button v-show="saveBtnShow" type="primary" v-if="!isView" @click="saveFn" :disabled="isView">保存</yu-button>
                <yu-button v-show="saveBtnShow" type="info" v-if="isView" @click="saveFn" :disabled="isView">保存</yu-button>
                <yu-button @click="cancelFn">关闭</yu-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </yu-xdialog>
      </yu-col>
    </yu-row>
  </yu-panel>

  <yu-xdialog :title="viewClassTitle" :visible.sync="classDialogVisible" width="700px">
    <el-form-x label-width="110px" ref="refClassForm" :group-fields="classFields" :buttons="classButtons" />
  </yu-xdialog>
  <yu-xdialog title="选择目录" :visible.sync="chooseFolderDialogVisible" width="300px">
    <yu-xtree :show-checkbox="true" ref="refFolderTree" :height="folderHeight" @check-change="folderNodeClickFn" :default-checked-keys="defaultFolderKey"
      :data-url="treeDataUrl" data-id="currentNodeId" data-label="currentNodeName" data-pid="parentId" :data-async="async"
      default-expand-all check-strictly :data-root="folderRoot" icon="iconPath">
    </yu-xtree>
    <div class="yu-grpButton">
      <yu-button v-show="saveBtnShow" type="primary" @click="selectFolderSaveFn">确认</yu-button>
      <yu-button v-show="cancelBtnShow" @click="selectFolderCancelFn">取消</yu-button>
    </div>
  </yu-xdialog>
  <yu-xdialog title="公共宏参数选择" :visible.sync="chooseCommonParamDialogVisible" width="50%">
    <el-form-q ref="queryForm" :field-data="commParamFieldDatas" :buttons="commParamButtons">
    </el-form-q>
    <el-table-x ref="commParamTableRef" :checkbox="true" :data-url="commParamDataUrl" :table-columns="commParamFieldColumns"></el-table-x>
  </yu-xdialog>
  <yu-xdialog title="触发器选择" :visible.sync="chooseTriggerDialogVisible" width="70%">
    <el-form-q ref="queryTriggerForm" :field-data="triggerFieldDatas" :buttons="triggerButtons"></el-form-q>
    <el-table-x ref="triggerTableRef" max-height="500" :checkbox="true" :data-url="triggerDataUrl" :table-columns="triggerFieldColumns"></el-table-x>
  </yu-xdialog>
  
  <yu-dialog title="excel导入" :visible.sync="upLoadDialogVisible" width="400px" v-loading="excelloading">
  				<yu-upload class="upload-demo" ref="my-upload" :action="upLoadUrl" accept=".xls,.xlsx" :before-upload="checkUpload"
  					 :multiple="multipleFalg"	:on-success="successUpload" :file-list="appUploadDatas">
  					<yu-button size="small" type="primary">点击上传</yu-button>
					<a slot="tip" class="downloadcss" @click="exportDemo">模板下载</a>
  					<div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过100M</div>
  				</yu-upload>
  				<div class="uplaod-errinfo" v-if="errshow">
  					<yu-tag type="danger">上传失败，错误信息如下：</yu-tag>
  					<div class="uplaod-errlist">
  							<yu-table :data="errdata" highlight-current-row style="width:100%" show-header>
  								<yu-table-column type="index"  width="50">
  									
  								</yu-table-column>
  								<yu-table-column prop="errMsg" label="错误信息">
  									
  								</yu-table-column>
  							</yu-table>	
  					</div>
  				</div>
  </yu-dialog>
</div>
<style>
	.downloadcss{
		cursor: pointer;
		margin-left:10px;
	}
  .tree-custom-schdule {
    border: 1px solid #d1dbe5;
    margin-top: 10px;
    margin-right: 5px;
    padding: 0 !important;
  }

  .tree-custom-schdule .yu-toolBar {
    padding: 0;
  }

  .tree-custom-schdule .yu-toolBar>h2 {
    margin: 0;
    padding: 0;
    padding-left: 15px;
  }

  .tree-custom-schdule .el-button-group {
    display: block;
  }

  .tree-custom-schdule .el-button-group .el-button {
    border-width: 0;
    border-left-width: 1px;
    border-radius: 0;
    width: 33.3333334%;
  }

  .tree-custom-schdule .el-button-group .el-button:first-child {
    border-left-width: 0;
  }

  .tree-custom-schdule .el-button-group .el-button:last-child {
    border-right-width: 0;
  }

  .tree-custom-schdule .el-tree {
    margin-top: 0;
    margin-right: 0;
    border-width: 0;
    border-top-width: 1px;
  }
</style>